<template>
    <div>
        <h3>品牌：{{ brand }}</h3>
        <!-- <h3>价格：{{ price }}</h3> -->
        <h3>价格：{{ cprice }}</h3>
        <h3>颜色：{{ color }}</h3>
        <button @click=add>点击价格+1</button>
    </div>
</template>

<script>
export default {
    name: 'car',
    data() {
        return {
            cprice: this.price
        }
    },
    methods: {
        add() {
            this.cprice ++
        }
    },
    // data() {
    //     return {
    //         brand: '宝马520',
    //         price: 10,
    //         color: '黑色'
    //     }
    // }

    // 在car这个子组件当中，使用props配置项进行接收   

    // 第一种：简单的接收方式，直接采用数组接收
    // props: ['brand', 'color', 'price']

    // 第二种：添加类型限制
    /*props: {
        brand: String,
        price: Number,
        color: String
    }*/

    // 第三种：添加类型限制，并且还可以添加默认值，还可以添加必要性
    // 注意：不要修改props里面的数据，可以借助中间属性操作变化
    props: {
        brand: {
            type: String,
            required: true //必填属性
        },
        color: {
            type: String,
            default: '红色' // 设置默认值
        },
        price: {
            type: Number,
            required: true
        }
    }
}

</script>